<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1 v-once>{{count}}</h1>
    <h1 v-once>{{count}}</h1>

    <div>
        <h1>{{count}}</h1>
        <h1>{{count}}</h1>
    </div>
    <button @click="changeCount">点击</button>
</div>
<script src="../js/vue.js"></script>
<script>
    /*
    * v-once指令：
       仅渲染元素和组件一次，并跳过之后的更新。
       无需传入
       详细信息：
            在随后的重新渲染，元素/组件及其所有子项将被当作静态内容并跳过渲染。这可以用来优化更新时的性能。
    * */
    const app=Vue.createApp({
        data(){
            return{
                count:0
            }
        },
        methods:{
            changeCount(){
                this.count++
            }
        }
    })
    app.mount("#app")
</script>
</body>
</html>
